<template>
	<view class="my-adopt">
		<u-navbar title-color="#000" :isBack="true" back-icon-color="#000" height="60" title="发布领养启示">
			<view class="navbar-right" slot="right" @click="submit">
				<view class="message-box right-item">
					提交
				</view>
			</view>
		</u-navbar>
		<u-form>
			<u-form-item>
				<u-input height="90" placeholder="请输入标题" v-model="info.infoTitle" type="text" :border="true"></u-input>
			</u-form-item>
			<u-input type="textarea" placeholder="请填写简介" v-model="info.infoComm" height="300" :border="false" />
			<u-upload @on-list-change="onListChange" width="160" height="160" :max-count="9" :action="pathurl"></u-upload>
			<u-form-item padding="0upx 20upx">
				<view class="wrap-item">
					<image src="../../static/img/定位.png" class="img"></image>
					<text class="info color">{{get_address}}</text>
				</view>
			</u-form-item>
			<u-form-item padding="0upx 20upx">
				<view class="cheack" @click="checkBody('infoReceive')">
					<view class="wrap-item">
						<image src="../../static/img/宠物箱.png" class="img"></image>
						<text class="info">领取方式</text>
					</view>
					<view class="body">
						<view class="info color">{{info.infoReceive}}</view>
						<image src="../../static/icon/跳转_1.png" class="tz-icon"></image>
					</view>
				</view>
			</u-form-item>
			<u-form-item padding="0upx 20upx">
				<view class="cheack" @click="checkBody('infoSpecies')">
					<view class="wrap-item">
						<image src="../../static/icon/橙色领养.png" class="img"></image>
						<text class="info">宠物类别</text>
					</view>
					<view class="body">
						<view class="info color">{{info.infoSpecies}}</view>
						<image src="../../static/icon/跳转_1.png" class="tz-icon"></image>
					</view>
				</view>
			</u-form-item>
			<u-form-item padding="0upx 20upx">
				<view class="cheack" @click="checkBody('infoDewo')">
					<view class="wrap-item">
						<image src="../../static/img/虫害-通用.png" class="img"></image>
						<text class="info">体内驱虫</text>
					</view>
					<view class="body">
						<view class="info color">{{info.infoDewo}}</view>
						<image src="../../static/icon/跳转_1.png" class="tz-icon"></image>
					</view>
				</view>
			</u-form-item>
			<u-form-item padding="0upx 20upx">
				<view class="cheack" @click="checkBody('infoVaccines')">
					<view class="wrap-item">
						<image src="../../static/img/宠物针.png" class="img"></image>
						<text class="info">疫苗</text>
					</view>
					<view class="body">
						<view class="info color">{{info.infoVaccines}}</view>
						<image src="../../static/icon/跳转_1.png" class="tz-icon"></image>
					</view>
				</view>
			</u-form-item>
			<u-form-item padding="0upx 20upx">
				<view class="cheack" @click="checkBody('infoSterilization')">
					<view class="wrap-item">
						<image src="../../static/img/宠物麻醉机.png" class="img"></image>
						<text class="info">绝育</text>
					</view>
					<view class="body">
						<view class="info color">{{info.infoSterilization}}</view>
						<image src="../../static/icon/跳转_1.png" class="tz-icon"></image>
					</view>
				</view>
			</u-form-item>
		</u-form>
		<footer-btn></footer-btn>
		<u-select mode="single-column" @confirm="selectConfirm" :list="selectList" v-model="selectShow"></u-select>
	</view>
</template>

<script>
	import footerBtn from '../../components/footer-btn.vue';
	export default {
		components: {
			footerBtn
		},
		data() {
			return {
				info: {
					infoTitle: '',
					infoComm: '',
					infoImgList: [],
					infoReceive: '来我家',
					infoSpecies: '狗狗',
					infoDewo: '是',
					infoVaccines: '是',
					infoSterilization: '是'
				},
				pathurl: this.$url.serverUrl,
				selectList: [],
				type: '',
				selectShow: false,
				infoReceive_list: [{
						value: '来我家',
						label: '来我家'
					},
					{
						value: '去你家',
						label: '去你家'
					},
					{
						value: '邮寄',
						label: '邮寄'
					}
				],
				infoSpecies_list: [{
						value: '狗狗',
						label: '狗狗'
					},
					{
						value: '猫猫',
						label: '猫猫'
					},
					{
						value: '小猪',
						label: '小猪'
					}
				],
				mode_list: [{
						value: '0',
						label: '否'
					},
					{
						value: '1',
						label: '是'
					},
					{
						value: '2',
						label: '不详'
					}
				]
			};
		},
		onLoad() {},
		methods: {
			onListChange(lists) {
				this.info.infoImgList = lists
			},
			checkBody(type) {
				if (type == 'infoDewo' || type == 'infoVaccines' || type == 'infoSterilization') {
					this.selectList = this.mode_list
				} else {
					this.selectList = this[`${type}_list`]
				}
				this.type = type
				this.selectShow = true
			},
			selectConfirm(e) {
				this.info[this.type] = e[0].label
			},
			submit() {
				let info = JSON.parse(JSON.stringify(this.info))
				info.infoImgList = info.infoImgList.map(item => {
					if (item.response.code) {
						return item.response.url
					}
				})
				info.infoAddress = this.get_address
				info.infoDewo = this.get_state(info.infoDewo)
				info.infoVaccines = this.get_state(info.infoVaccines)
				info.infoSterilization = this.get_state(info.infoSterilization)
				let valLoginRes = this.$validate.validate(info, [{
						name: 'infoTitle',
						type: 'required',
						errmsg: '标题不能为空'
					},
					{
						name: 'infoComm',
						type: 'required',
						errmsg: '内容不能为空'
					},
					{
						name: 'infoImgList',
						type: 'arrlength',
						errmsg: '图片不能为空'
					}
				])
				if (!valLoginRes.isOk) {
					this.$comm.errorToShow(valLoginRes.errmsg)
					return false
				}
				this.$api.addInfo({
					...info,
					infoType: 0
				}).then(res => {
					if (res.code == 1) {
						this.$comm.successToShow(res.msg, () => {
							this.$comm.switchTabTo('/pages/index/index')
						})
					} else if (res.code == 444) {
						this.$comm.errorToShow(res.msg)
					}
				})
			},
			get_state(val) {
				let arr = [{
						value: '0',
						label: '否'
					},
					{
						value: '1',
						label: '是'
					},
					{
						value: '2',
						label: '不详'
					}
				]
				return arr.find(item => item.label == val).value
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
		min-height: 100vh;
	}

	.cheack {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.body {
		display: flex;
		align-items: center;
		font-size: 24upx;

		.info {
			margin-right: 20upx;

			&.color {
				color: $tabAction;
			}
		}

		.tz-icon {
			width: 20upx;
			height: 20upx;
		}
	}

	.wrap-item {
		display: flex;
		align-items: center;

		.img {
			width: 40upx;
			height: 40upx;
		}

		.info {
			margin-left: 35upx;
			font-size: 24upx;

			&.color {
				color: $tabAction;
			}
		}
	}




	.my-adopt {
		background-color: #FFFFFF;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		display: flex;
	}

	.message-box {
		padding: 6upx 24upx;
		font-size: 24upx;
		background-color: $indexColor;
		color: #FFFFFF;
		border-radius: 12upx;
	}
</style>
